// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base/palette' as *;

$border: 1px solid $pastel-gray;

.editable-topbar {
  display: flex;
  justify-content: space-between;
  min-width: 1000px;

  .editable-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    :global(.ui.button) {
      margin-right: 0;
      min-height: 37px;
    }
  }
}

.editable-list {
  .table {
    font-family: 'Muli', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .rowcolumn-tooltip {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
  }

  .id-cell {
    display: flex;
    align-items: center;
  }

  :global(.ReactVirtualized__Table__Grid) {
    outline: none;
  }

  :global(.ReactVirtualized__Table__headerRow) {
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    border-top: $border;
    border-bottom: $border;
  }

  :global(.ReactVirtualized__Table__row) {
    display: flex;
    border-bottom: $border;
  }

  :global(.ReactVirtualized__Table__headerTruncatedText) {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  :global(.ReactVirtualized__Table__headerColumn),
  :global(.ReactVirtualized__Table__rowColumn) {
    margin-right: 10px;
    align-items: center;
    display: flex;
  }

  :global(.ReactVirtualized__Table__headerColumn:first-of-type),
  :global(.ReactVirtualized__Table__rowColumn:first-of-type) {
    margin-left: 10px;
  }

  :global(.ReactVirtualized__Table__sortableHeaderColumn) {
    cursor: pointer;
    outline: none;
  }

  :global(.ReactVirtualized__Table__sortableHeaderIconContainer) {
    display: flex;
    align-items: center;
  }

  :global(.ReactVirtualized__Table__sortableHeaderIcon) {
    flex: 0 0 24px;
    height: 1em;
    width: 1em;
    /* stylelint-disable-next-line value-keyword-case */
    fill: currentColor;
  }

  .more-tags-indicator {
    position: absolute;
    right: 0;
    top: 48%;
    transform: translateY(-50%);
    z-index: 1;
    background-color: white;
    padding-top: 0.9em;
    padding-bottom: 0.9em;
    cursor: pointer;
  }
}

:global(.editable-list-tag-labels) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  row-gap: 0.5em;
}
